<template>
    <div>
      <el-dialog title="新建联系人" :visible.sync="dialogVisible" width="80%">
        <div>
          <create-sections title="基本信息">
            <el-form ref="crmForm" :model="fieldForm" :rules="fieldRules" :inline="true">
              <div style="display: flex;">
                <div class="div-flex">
                  <el-form-item label="姓名" style="width:100%">
                    <el-input v-model="form.name"></el-input>
                  </el-form-item>
                </div>
                
                <div class="div-flex">
                  <el-form-item label="负责人" style="width:100%">
                    <el-input v-model="form.name"></el-input>
                  </el-form-item>
                </div>

                <div style="flex:1">
                  <el-form-item label="客户名称" style="width:100%;">
                    <el-select v-model="value" placeholder="请选择" style="width:90%">
                      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                      </el-option>
                    </el-select>
                    <el-button style="height:36px;width:10%;" @click="addCustomer">+</el-button>
                  </el-form-item>
                </div>
              </div>
  

              <div style="display: flex;">
                <div class="div-flex">
                  <el-form-item label="手机" style="width:100%">
                    <el-input v-model="form.name"></el-input>
                  </el-form-item>
                </div>
  
                <div class="div-flex">
                  <el-form-item label="电话" style="width:100%">
                    <el-input v-model="form.name"></el-input>
                  </el-form-item>
                </div>
  
                <div style="flex:1">
                  <el-form-item label="邮箱" style="width:100%">
                    <el-input v-model="form.name"></el-input>
                  </el-form-item>
                </div>
              </div>
  
 
  
              <div style="display: flex;">
                <div class="div-flex">
                  <el-form-item label="职务" style="width:100%">
                    <el-input v-model="form.name"></el-input>
                  </el-form-item>
                </div>
  
                <div class="div-flex">
                  <el-form-item label="是否关键决策人" style="width:100%">
                    <el-select v-model="value" placeholder="请选择" style="width:100%">
                      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </div>
  
                <div style="flex:1">
                  <el-form-item label="直属上级" style="width:100%">
                    <el-select v-model="value" placeholder="请选择" style="width:100%">
                      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </div>
              </div>
  
              <div style="display: flex;">
                <div class="div-flex">
                <el-form-item label="下次联系时间" style="width:100%">
                  <el-date-picker v-model="value1" type="datetime" placeholder="选择日期时间" style="width:100%">
                  </el-date-picker>
                </el-form-item>
              </div>
                <div class="div-flex">
                  <el-form-item label="地址" style="width:100%">
                    <el-cascader placeholder="试试搜索：指南" :options="optionsAdd" filterable style="width:100%"></el-cascader>
                  </el-form-item>
                </div>
  
                <div style="flex:1">
                  <el-form-item label="详细地址" style="width:100%">
                    <el-input v-model="form.name"></el-input>
                  </el-form-item>
                </div>
              </div>
  
            </el-form>
          </create-sections>
        </div>

        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogVisible = false">保 存</el-button>
          <el-button @click="dialogVisible = false">取 消</el-button>
        </span>
        
      </el-dialog>

      <customerRelation ref="customerRelation" :action="createAction" @save-success="saveSuccess" />
    </div>
  </template>
  <script>
  import { mapGetters } from 'vuex'
  import addCustomer from "../customerManage/addCustomer";
  import CreateSections from "@/components/CreateSections";
  import FormItemMore from '@/components/busComponents/NewComponents/BusForm/FormItemMore'
  import { isEmpty } from '@/utils/types'
  import CustomFieldsMixin from '@/mixins/CustomFields'
  import customerRelation from '@/components/customerManage/customerRelation.vue'
 
  export default {
    name: "addContacts",
    components: { CreateSections, FormItemMore, customerRelation },
    mixins: [CustomFieldsMixin],
    props: {
      phone: String,
      action: {
        type: Object,
        default: () => {
          return {
            type: "save",
            id: "",
            data: {},
          };
        },
      },
    },
    data () {
      return {
        dialogVisible: false,
        loading: false,
        baseFields: [],
        columnList: [],
        fieldForm: {},
        fieldRules: {},
        form: {
          name: '',
        },
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        optionsAdd: [{
          value: 'zhinan',
          label: '指南',
          children: [{
            value: 'shejiyuanze',
            label: '设计原则',
            children: [{
              value: 'yizhi',
              label: '一致'
            }, {
              value: 'fankui',
              label: '反馈'
            }, {
              value: 'xiaolv',
              label: '效率'
            }, {
              value: 'kekong',
              label: '可控'
            }]
          }, {
            value: 'daohang',
            label: '导航',
            children: [{
              value: 'cexiangdaohang',
              label: '侧向导航'
            }, {
              value: 'dingbudaohang',
              label: '顶部导航'
            }]
          }]
        }, {
          value: 'ziyuan',
          label: '资源',
          children: [{
            value: 'axure',
            label: 'Axure Components'
          }, {
            value: 'sketch',
            label: 'Sketch Templates'
          }, {
            value: 'jiaohu',
            label: '组件交互文档'
          }]
        }],

        value: '',
        value1: '',
        tableData: [],

        createAction:{},
      };
    },
    computed: {
      ...mapGetters(['crm', 'moduleData']),
      // 如果有次数就可以使用
      canUseEnterprise () {
        const enterprise = this.moduleData.find(item => item.module === 'enterprise')
        return enterprise ? enterprise.number > 0 : false
      },
      contactsSaveAuth () {
        return this.crm.contacts && this.crm.contacts.save
      },
      title () {
        return this.action.type === 'update' ? '编辑客户' : '新建客户'
      }
    },
    methods: {
        
      cellClass ({ row, column, rowIndex, columnIndex }) {
        if (column.property === 'merchantNum') {
          return 'look--underline'
        } else {
          return ''
        }
      },

      addCustomer () {
        this.createAction = {
          type: 'save',
          id: '',
          data: {}
        }
        this.$refs.customerRelation.showRelationFun();
      },

      saveSuccess(data) {
        if (data.type == 'customer') {
          // this.handleHandle(data) ---刷新列表
          if (data.createContacts) {
            // this.createType = 'contacts'
            this.createAction = {
              type: 'relative',
              crmType: 'customer',
              data: {
                customer: data.data
              }
            }
            this.createShow = true
          }
        }
      },
      showFun () {
        this.dialogVisible = true;
        this.queryListHead()
      },
      closeFun () {
        this.dialogVisible = false;
      },
      queryListHead () {
        this.loading = true
        const list = addCustomer.formEl || [];
  
        if (!isEmpty(this.phone)) {
          list.forEach((item) => {
            if (item.formType === "mobile") {
              item.defaultValue = this.phone;
            }
          });
        }
  
        const assistIds = this.getFormAssistIds(list);
  
        const baseFields = [];
        const columnList = [];
        const fieldRules = {};
        const fieldForm = {};
  
        list.forEach((children) => {
          const fields = [];
          children.forEach((item) => {
            const temp = this.getFormItemDefaultProperty(item);
            temp.show = !assistIds.includes(item.formAssistId);
  
            const canEdit = this.getItemIsCanEdit(item, this.action.type);
            // 是否能编辑权限
            if (temp.show && canEdit) {
              fieldRules[temp.field] = this.getRules(item);
            }
  
            // 是否可编辑
            temp.disabled = !canEdit;
  
            // 禁止某些业务组件选择
            if (temp.formType == "customer") {
              if (this.action.type == "relative") {
                const relativeDisInfos = {
                  customer: { customer: true },
                  contacts: { customer: true },
                };
  
                // 在哪个类型下添加
                const relativeTypeDisInfos =
                  relativeDisInfos[this.action.crmType];
                if (relativeTypeDisInfos) {
                  // 包含的字段值
                  temp.disabled = relativeTypeDisInfos[item.formType] || false;
                }
              }
            }
  
            // 特殊字段允许多选
            this.getItemRadio(item, temp);
  
            // 获取默认值
            if (temp.show) {
              fieldForm[temp.field] = this.getItemValue(
                item,
                this.action.data,
                this.action.type
              );
            }
            fields.push(temp);
            baseFields.push(item);
          });
          columnList.push(fields);
  
          this.baseFields = baseFields
          this.columnList = columnList
          this.fieldForm = fieldForm
          this.fieldRules = fieldRules
  
          this.loading = false
        });
      },

      //change
      formChange (field, index, value, valueList) {
        if ([
          'select',
          'checkbox'
        ].includes(field.formType) &&
          field.remark === 'options_type' &&
          field.optionsData) {
          const { fieldForm, fieldRules } = this.getFormContentByOptionsChange(this.fieldList, this.fieldForm)
          this.fieldForm = fieldForm
          this.fieldRules = fieldRules
        }
      },

      addCustomer () {
      this.createAction = {
        type: 'save',
        id: '',
        data: {}
      }
      this.$refs.customerRelation.showRelationFun();
    },
    saveSuccess(data) {
      if (data.type == 'customer') {
        // this.handleHandle(data) ---刷新列表
        if (data.createContacts) {
          // this.createType = 'contacts'
          this.createAction = {
            type: 'relative',
            crmType: 'customer',
            data: {
              customer: data.data
            }
          }
          this.createShow = true
        }
      }
    },
      
    
    },
  };
  </script>
  <style lang="scss" scoped>
  @import "@/assets/styles/custom-element.scss";
  
  .div-flex {
    flex: 1;
    margin-right: 22px;
  }
  
  .add-customer {
    font-size: 16px;
    font-weight: 400;
    color: #204EC4;
    line-height: 36px;
    position: absolute;
    top: 0;
    right: 0;
  
  }
  </style>